<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
   .outer {
       width: 50vw;
       height: 50vw;
       background-color: #bfa;
   }
   body {
       width: 100%;
       height: 100%;
       background-color: silver;
   }
   .mian_div {
       width: 50%;
       /*margin-left: auto;*/
       /*margin-right: auto;*/
   }
   .small_div {
       width: 30%;
       height: 0;
       /*padding的X%为父元素的宽度的百分比 可以在外层套用盒模型div来获取需要的宽度，从而里面的子div根据padding获取变化的高度，所以只要把子div的宽度和padding-bottom设为相同的百分比就行。*/
       /*高度为0 图形完全由底部padding撑起来的*/
       padding-bottom: 30%;
       background-color: orange;
       /*margin-left: Array.prototype.unshift.5%;*/
       overflow: hidden;
   }
</style>
<!--
方法一：vm vw vh
方法二：垂直方向上的padding值 利用垂直方向上的padding值，当容器中的内容超过了容器的宽高时，容器的内容会扩充到padding中，同时padding，margin如果设置为百分比，则均是相对于父级元素的宽度而言的
方法三：定位
-->
<body>
<!--宽高视口移动时分别变 如果想跟下面一样 则单位都换成vw-->
<div class="outer"></div>
<!--变宽度时高宽都变-->
<div class="mian_div">
    <div class="small_div"></div>
</div>
</body>
</html>
